<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
</head>
<body>
    <script >
       /*
        ES6
        ... 扩展运算符，能够将数组转换为逗号隔开的参数序列
       */
      const cn = ['pop','pipi']; // => pop,pipi
      function fn(){
        console.log(arguments);
      }

      fn(cn);
      /*
      Arguments(1)
      0: Array(2)
        0: "pop"
        1: "pipi"
        length: 2
      [[Prototype]]: Array(0)
      callee: ƒ fn()
      length: 1
      Symbol(Symbol.iterator): ƒ values()
      [[Prototype]]: Object
      */
     fn(...cn);
     /*
     Arguments(2) ['pop', 'pipi', callee: ƒ, Symbol(Symbol.iterator): ƒ]
      0: "pop"
      1: "pipi"
      callee: ƒ fn()
      length: 2
      Symbol(Symbol.iterator): ƒ values()
      [[Prototype]]: Object
     */
    // 我们可以发现，两者的参数的位置改变了，也就是
    // fn(...cn)的做法其实是相当于将参数
    // 从 ['pop','pipi']; // => pop,pipi 变成了这样

    // 数组的合并

    const ar1 = ['张杰','张杰1']
    const ar2 = ['刘欢','刘欢2']

    // 常用合并
    ar1.concat(ar2);
    // 扩展运算，由于变成序列
    const ar3 = [...ar1,...ar2];

    // 数组的克隆，由于直接是变成元素序列，所以可以直接放进去
    const ar4 = [...ar1];

    // 将伪数组转为真正的数组
    const divs = document.querySelectorAll('div');
    const divArr = [...divs];
    
    </script>
</body>

</html>